<template>
	<view
		:class="[
			'z-20 row-center',
			isStatic ? 'sticky' : 'fixed inset-x-0',
			isBlack ? '' : 'color-white',
			extraClass || '',
			hidden ? 'hidden' : '',
		]"
		:style="{ top: isStatic ? '0' : titleBarTop + 'px', 'padding-top': isStatic ? titleBarTop + 'px' : '0' }"
	>
		<view
			v-if="!hideBack"
			class="px-3-1 py-2-2"
			@click="back"
			hover-class="opacity-50"
			hover-start-time="0"
			hover-stay-time="0"
		>
			<i class="iconfont icon-zuo color-main"></i>
		</view>
		<view class="flex-1 flex-center" v-if="title" :class="[hideBack ? 'py-2-2' : '']">
			<text v-if="icon" class="iconfont mr-1-3" :class="[icon]" :style="{ color: iconColor }"></text>
			<text class="text-title font-semibold">{{ title || '' }}</text>
		</view>
		<view class="px-3-1 py-2-2 hidden" v-if="title && !hideBack">
			<i class="iconfont icon-zuo color-main"></i>
		</view>
		<slot />
	</view>
</template>

<script>
export default {
	props: {
		title: String,
		isStatic: Boolean,
		isBlack: Boolean,
		myBack: Boolean,
		icon: String,
		iconColor: String,
		extraClass: String,
		reLaunchUrl: String,
		hideBack: Boolean,
		hidden: Boolean,
	},
	setup(props, ctx) {
		const info = uni.getSystemInfoSync();
		const titleBarTop = info.statusBarHeight;
		return {
			titleBarTop,
			back() {
				if (props.hidden) return;
				if (props.myBack) {
					ctx.emit('back');
				} else {
					const routes = getCurrentPages();
					if (routes.length === 1) {
						uni.reLaunch({
							url: props.reLaunchUrl || '/pages/home/project/project',
						});
					} else {
						uni.navigateBack();
					}
				}
			},
		};
	},
};
</script>

<style></style>
